<template>
	<view class="html">
		<u-textarea class="input" v-model="context" count height="25vh" maxlength="300" placeholder="请输入内容">
		</u-textarea>
		<view class="btngroup">
			<u-row gutter="4" justify="space-between">
				<u-col span="4">
					<u-button :plain="true" v-if="platform==''||platform==undefined" @click="showclose(0)"
						:hairline="true" text="平台">
					</u-button>
					<u-button type="warning" v-if="platform!=''&&platform!=undefined" @click="showclose(0)"
						:plain="true" :hairline="true" :text="Platform">
					</u-button>
				</u-col>
				<u-col span="4">
					<u-button :plain="true" v-if="from==''||from==undefined" @click="showclose(1)" :hairline="true"
						text="源语言">
					</u-button>
					<u-button type="warning" v-if="from!=''&&from!=undefined" @click="showclose(1)" :plain="true"
						:hairline="true" :text="From"></u-button>
				</u-col>
				<u-col span="4">
					<u-button :plain="true" v-if="to==''||to==undefined" @click="showclose(2)" :hairline="true"
						text="目标语言"></u-button>
					<u-button type="warning" v-if="to!=''&&to!=undefined" @click="showclose(2)" :plain="true"
						:hairline="true" :text="To"></u-button>
				</u-col>
			</u-row>
		</view>
		<u-button type="primary" @click="startTranslate(platform)" plain class="btngroup" text="翻译"></u-button>
		<u-button type="error" v-if="newContext!=''" @click="copyContext()" plain class="btngroup" text="一键复制">
		</u-button>
		<u-text style="margin-top: 3%;" size="18" :text="newContext"></u-text>

		<u-action-sheet @select="selectplatform" :actions="platformlist" title="请选择翻译平台" :closeOnClickOverlay="true"
			:closeOnClickAction="true" @close="platformshow=false" :show="platformshow"></u-action-sheet>
		<u-popup :show="fromshow" mode="right" @close="fromshow=false">
			<u-list>
				<u-list-item v-for="(item,index) in languageList" :key="index">
					<u-cell :title="item.label" @click="selectFromTo(item,0)"></u-cell>
				</u-list-item>
			</u-list>
		</u-popup>

		<u-popup :show="toshow" mode="right" @close="toshow=false">
			<u-list>
				<u-list-item v-for="(item,index) in languageList" :key="index">
					<u-cell :title="item.label" @click="selectFromTo(item,1)"></u-cell>
				</u-list-item>
			</u-list>
		</u-popup>
		<u-notify ref="tipNotify"></u-notify>
	</view>
</template>

<script>
	import aliLanguageList from '../../static/language/aliLanguageList.js'
	import baiduLanguageList from '../../static/language/baiduLanguageList.js'
	import youdaoLanguageList from '../../static/language/youdaoLanguageList.js'

	import storage from '../../store/storage.js'

	import {
		baiducommonTranslate,
		alicommonTranslate,
		youdaocommonTranslate
	} from '../../api/translateapi.js'
	export default {
		data() {
			return {
				context: '',
				Platform: '',
				platform: '',
				From: '',
				from: '',
				To: '',
				to: '',
				newContext: '',
				platformshow: false,
				platformlist: [{
						name: '百度翻译',
						value: 'baidu'
					},
					{
						name: '阿里云翻译',
						value: 'ali'
					},
					{
						name: '有道云翻译',
						value: 'youdao',
						disabled: true
					}
				],
				fromshow: false,
				toshow: false,
				languageList: []
			}
		},
		methods: {
			showclose(item) {
				switch (item) {
					case 0:
						this.platformshow = !this.platformshow;
						break;
					case 1:
						this.fromshow = !this.fromshow;
						break;
					case 2:
						this.toshow = !this.toshow;
						break;
				}

			},
			selectplatform(e) {
				this.clearSelected()
				switch (e.value) {
					case "baidu":
						this.languageList = baiduLanguageList.list;
						break;
					case "ali":
						this.languageList = aliLanguageList.list;
						break;
					case "youdao":
						this.languageList = youdaoLanguageList.list;
						break;
				}
				this.Platform = e.name;
				this.platform = e.value;
				this.platformshow = false;
				storage.setPlatform(e);
			},
			selectFromTo(val1, val2) {
				switch (val2) {
					case 0:
						this.From = val1.label;
						this.from = val1.value;
						this.fromshow = false;
						storage.setLanguage1(val1);
						break;
					case 1:
						this.To = val1.label;
						this.to = val1.value;
						this.toshow = false;
						storage.setLanguage2(val1);
						break;
				}
			},
			startTranslate(e) {
				let reg = /^\s*$/g;
				if (reg.test(this.context) || this.context == null || this.context == undefined) {
					this.$refs.tipNotify.warning("请输入要翻译内容");
					return;
				} else if (reg.test(this.platform) || this.platform == null || this.platform == undefined) {
					this.$refs.tipNotify.warning("请选择翻译平台");
					return;
				} else if (reg.test(this.from) || this.from == null || this.from == undefined) {
					this.$refs.tipNotify.warning("请选择源语言");
					return;
				} else if (reg.test(this.to) || this.to == null || this.to == undefined) {
					this.$refs.tipNotify.warning("请选择翻译后语言");
					return;
				}
				let val = {
					"context": this.context,
					"from": this.from,
					"to": this.to,
					"platform": this.platform
				}
				console.log("开始翻译")
				switch (e) {
					case "baidu":
						baiducommonTranslate(val).then(res => {
							this.newContext = res.data;
						});
						break;
					case "ali":
						alicommonTranslate(val).then(res => {
							this.newContext = res.data;
						})
						break;
					case "youdao":
						youdaocommonTranslate(val).then(res => {
							this.newContext = res.data;
						})
						break;
				}

			},
			copyContext() {
				let reg = /^\s*$/g;
				if (!reg.test(this.newContext)) {
					uni.setClipboardData({
						data: this.newContext
					})
				}
			},
			clearSelected() {
				this.from = '';
				this.From = '';
				this.to = '';
				this.To = '';
				this.platform = '';
				this.Platform = '';
				storage.setLanguage1('');
				storage.setLanguage2('');
			},
			init() {
				this.languageList = baiduLanguageList.list;
				this.context = '';
				this.newContext = '';
				let reg = /^\s*$/g;
				if (!reg.test(storage.getPlatform())) {
					let p = storage.getPlatform();
					this.Platform = p.name;
					this.platform = p.value;
				}
				if (!reg.test(storage.getLanguage1())) {
					let p = storage.getLanguage1();
					this.From = p.label;
					this.from = p.value;
				}
				if (!reg.test(storage.getLanguage2())) {
					let p = storage.getLanguage2();
					this.To = p.label;
					this.to = p.value;
				}
			}
		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() {
			this.init();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000)
		}
	}
</script>

<style lang="scss">
	.html {
		width: 96vw;
		margin: 0 auto;

		.input {
			border: 1px dotted #b0a6a6;
			margin-top: 2%;
		}

		.btngroup {
			margin: 0 auto;
			margin-top: 2%;
		}

		.newtext {
			margin: 0 auto;
			margin-top: 4%;
		}
	}
</style>
